import React from 'react';
import { observer } from 'mobx-react';
import { TemplateStoreProps } from '../../stores/list/TemplateStore';
import { WeaFormItem, WeaTools, WeaDialog, WeaLocaleProvider } from 'ecCom';
import { WeaSwitch } from 'comsMobx';
import { Button } from 'antd';
const getLabel = WeaLocaleProvider.getLabel;

export interface TemplateProps {
    template: TemplateStoreProps;
    params?: any;
}
@observer
export default class Template extends React.Component<TemplateProps, any> {
    render() {
        const { template } = this.props;
        let formParams = template.form.getFormParams();
        return (
            <div>
                {
                    template.fields.map(d => {
                        let key = WeaTools.getKey(d);
                        let error = template.errors[key];
                        return (<div className="wea-search-group" >
                            <WeaFormItem
                                label={d.label}
                                labelCol={{ span: d.labelcol }}
                                wrapperCol={{ span: d.fieldcol }}
                                error={template.form.getError(d)}
                                tipPosition="bottom"
                            >
                                <WeaSwitch fieldConfig={d} form={template.form} formParams={formParams} onChange={template.clearError.bind(this, key)} />
                                <div className="form-item-error"
                                    dangerouslySetInnerHTML={{ __html: error && `<span style="color:#f50;"><i class="anticon anticon-cross-circle" ></i>${error}</span>` }} />
                            </WeaFormItem>
                            </div>
                        )
                    })
                }
            </div >
        )
    }
}

@observer
export class TemplateDialog extends React.Component<TemplateProps, any>{
    render() {
        const { template, params } = this.props;
        const {iconInfo} = params;
        const buttons = [<Button onClick={template.onCancel}>{getLabel(309,"关闭")}</Button>,
        <Button type="primary" loading={template.loading} onClick={template.onOk.bind(this, params)}>{getLabel(86,'保存')}</Button>]
        return (
            <WeaDialog
                className='wea-auth-modal cube-dialog'
                buttons={buttons}
                title={getLabel(16388,'新建模板')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon ||'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={template.visible}
                style={{ width: 520, height: 250 }}
                hasScroll={true}
                onCancel={template.onCancel}
            >
                <Template template={template} />
            </WeaDialog >
        )
    }
}
export const getTemplate = (template) => {
    return <Template template={template} />
}